<script setup lang="ts">
import { ref } from 'vue';
import Index from '@/views/HomeView/parts/Index/Index.vue';
import { EContainerWithScrollbar, EScrollX } from 'exploria-ui';

const showMark = ref(false);

const handleScroll = (scrollTop: number) => {
    console.log(scrollTop);
};
const color = [
    '#f00',
    'rgba(67,105,165,0.34)',
    '#d38686',
    '#c15454',
    '#471e1e',
    '#0e0505',
    '#ffa4a4',
    '#63ca63',
    '#734e4e',
];
</script>

<template>
    <EContainerWithScrollbar
        class="home-view"
        ref="home-view"
        @scroll="(scrollTop: number) => handleScroll(scrollTop)"
    >
        <!-- 用户看到的第一个页面 -->
        <Index class="page" />
        <EScrollX class="page">
            <div
                v-for="item of 9"
                :key="item"
                :style="{ backgroundColor: color[item - 1] }"
                class="item"
            >
                {{ item }}
            </div>
        </EScrollX>

        <!--        <LibsPage class="page" />-->

        <Transition name="mark" :duration="800">
            <div class="mark" v-show="showMark" @click="showMark = false">
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
                <div class="card"></div>
            </div>
        </Transition>
    </EContainerWithScrollbar>
</template>

<style lang="scss" scoped>
@use '@/style/global' as global;
@use 'sass:list';

.home-view {
    height: 100vh;

    .page {
        height: 100vh;
    }

    .e-scroll-y {
        position: sticky;
        top: 0;

        .item {
            height: 100%;
            width: 100vw;
        }
    }

    .mark {
        position: fixed;
        inset: 0;
        background-color: #33333333;
        display: grid;
        grid-template-areas:
            'card1 card2 card3'
            'card4 card5 card6';
        align-content: center;
        justify-content: center;
        gap: 20px;
        transition: opacity 0.3s linear;

        .card {
            $card-height: 300px;
            $card-width: 400px;
            height: $card-height;
            width: $card-width;
            background-color: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(5px);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px;
            overflow: hidden;
            color: #1f2020;
            transition:
                transform 0.3s ease-in-out,
                opacity 0.3s ease-in-out;

            @for $i from 1 through 6 {
                &:nth-child(#{$i}) {
                    grid-area: card#{$i};
                }
            }
        }

        &-enter-active > .card {
            // 循环每一个
            &:nth-child(1) {
                transition-delay: 0s;
            }

            &:nth-child(2) {
                transition-delay: 0.1s;
            }

            &:nth-child(3) {
                transition-delay: 0.2s;
            }

            &:nth-child(4) {
                transition-delay: 0.5s;
            }

            &:nth-child(5) {
                transition-delay: 0.4s;
            }

            &:nth-child(6) {
                transition-delay: 0.3s;
            }
        }

        &-leave-active > .card {
            // 循环每一个
            &:nth-child(1) {
                transition-delay: 0.5s;
            }

            &:nth-child(2) {
                transition-delay: 0.4s;
            }

            &:nth-child(3) {
                transition-delay: 0.3s;
            }

            &:nth-child(4) {
                transition-delay: 0s;
            }

            &:nth-child(5) {
                transition-delay: 0.1s;
            }

            &:nth-child(6) {
                transition-delay: 0.2s;
            }
        }

        &-enter-from,
        &-leave-to {
            opacity: 0;

            .card {
                opacity: 0;

                &:nth-child(1) {
                    transform: translate(-100%, -100%);
                }

                &:nth-child(2) {
                    transform: translateY(-100%);
                }

                &:nth-child(3) {
                    transform: translate(100%, -100%);
                }

                &:nth-child(4) {
                    transform: translate(-100%, 100%);
                }

                &:nth-child(5) {
                    transform: translateY(100%);
                }

                &:nth-child(6) {
                    transform: translate(100%, 100%);
                }
            }
        }
    }
}
</style>
